<template>
  <div class="flex-col" style="background-color: white">

    <div>
      <h1>角色选择</h1>
    </div>
    <div style="margin: 20px">
      <el-select  v-model="role" placeholder="请选择" @change="handleRoleChange">
        <el-option
            v-for="(item,index) in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="flex-col-start" style="padding: 20px 10px">
      <el-table
          :data="permissionList"
          style="width: 100%">

        <el-table-column
            prop="permission"
            label="权限名">
        </el-table-column>
        <el-table-column
            prop="permissionName"
            label="权限备注">
        </el-table-column>
        <el-table-column

            label="操作"
            width="180" v-loading="permissionLoading">
          <template slot-scope="scope">
            <el-switch

                style="margin-top: 5px"
                v-model="scope.row.check"
                @change="handlePermissionChange(scope.row)"
                active-text="开启">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>


    </div>

  </div>
</template>

<script>
import roleApi from "@/api/role/role";
import permissionApi from "@/api/permission/permission";

export default {
  name: "RoleController",
  data() {
    return {
      role: 1,
      roleList: [],
      permissionList: [],
      rolePermissionList: [],
      permissionLoading:false
    }
  },
  methods: {
    handlePermissionChange(open) {
      let roleP = {
        roleId: this.role,
        permissionId: open.id,
        isDelete: open.check ? 0 : 1
      }
      permissionApi.updateRolePermission(roleP).then(resp => {
        if (resp.code === 200) {
          this.$message.success("修改成功")
        } else {
          this.$message.success("修改失败")
        }
      })
    },
    getPermissionListByRoleId(roleId) {
      this.permissionLoading=true
      permissionApi.getListByRoleId(roleId).then(resp => {
        if (resp.code === 200) {
          this.rolePermissionList = resp.data
          // 重新判断哪些权限有
          this.initPermissionStatus()
          this.permissionLoading=true
        }
      })
    },
    handleRoleChange(id) {
      // 获取角色的权限
      this.getPermissionListByRoleId(id)

    },
    getAllRole() {
      roleApi.getAllRole().then(resp => {
        if (resp.code === 200) {
          this.roleList = resp.data
        }
      })
    },
    getAllPermission() {
      permissionApi.getAll().then(resp => {
        if (resp.code === 200) {

          let lst = resp.data
          // 初始化
          lst.forEach((item) => {
            item.check = false
          })
          this.permissionList = lst

        }
      })
    },
    initPermissionStatus() {

      // 角色拥有的权限
      let permission = this.rolePermissionList

      // 全权限数组
      this.permissionList.forEach(i => {
        i.check = false
        let find = permission.find((p) => {
          return p.id === i.id
        })
        if (find) {
          i.check = true
        }
      })
    }
  },
  computed: {},
  mounted() {
    this.getAllRole()
    this.getPermissionListByRoleId(this.role)
    this.getAllPermission()
  }
}
</script>

<style scoped lang="less">

</style>